<template>
	<view class="add-agent">
		<view class="step flex-center">
			<view :class="['box', 'flex-column', { active: stepCurrent >= stepIndex }]" v-for="(stepItem, stepIndex) in stepList" :key="stepIndex">
				<view class="icon-box flex-align-center">
					<view class="bg flex-center"><image :src="stepItem.icon" mode="aspectFill"></image></view>
					<view class="line" v-if="stepIndex < stepList.length - 1"></view>
				</view>
				<text :class="['text-name', { 'text-more': stepIndex == 1 }]">{{ stepItem.name }}</text>
			</view>
		</view>
		<view class="add-agent-contain">
			<view class="open-policy-contain-item">
				<u-form :model="form" ref="uForm" :error-type="errorType" :rules="rules">
					<view v-if="stepCurrent == 0">
						<u-form-item class="form-item" label="代理商名称" prop="agentName" label-width="300" required>
							<u-input v-model="form.agentName" input-align="right" placeholder="注册后代理商名称不能变更" />
						</u-form-item>
						<u-form-item class="form-item" label="联系人手机号" prop="linkMobile" label-width="300" required>
							<u-input v-model="form.linkMobile" input-align="right" placeholder="请输入联系人手机号" />
						</u-form-item>
						<u-form-item class="form-item" label="联系人姓名" prop="linkMan" label-width="300" required>
							<u-input v-model="form.linkMan" input-align="right" placeholder="请输入联系人姓名" />
						</u-form-item>
						<u-form-item class="form-item" label="平行代理商" prop="preAgentNo" label-width="300" v-if="switchFlag == 1">
							<u-input v-model="preAgentName" input-align="right" placeholder="请选择" />
							<u-icon slot="right" name="arrow-right" @click="preAgentHandel"></u-icon>
						</u-form-item>
						<u-form-item class="form-item" label="招商经理" prop="leasingManager" label-width="300">
							<u-input v-model="form.leasingManager" input-align="right" placeholder="请输入招商经理" />
						</u-form-item>
						<u-form-item class="form-item" label="地区" prop="province" label-width="300">
							<u-input v-model="areaName" input-align="right" placeholder="请选择地区" />
							<u-icon slot="right" name="arrow-right" @click="areaHandel"></u-icon>
						</u-form-item>
						<u-form-item class="form-item" label="详情地址" prop="address" label-width="300">
							<u-input v-model="form.address" input-align="right" placeholder="请输入详情地址" />
						</u-form-item>
					</view>
					<view v-if="stepCurrent == 1">
						<u-form-item class="form-item" label="出账类型" prop="accountTypeName" label-width="300" required>
							<u-input v-model="accountTypeName" input-align="right" placeholder="请选择出账类型" />
							<u-icon slot="right" name="arrow-right" @click="isShowAccountType = true"></u-icon>
						</u-form-item>
						<u-form-item class="form-item" label="银行名称" prop="bankName" label-width="300" required>
							<u-input v-model="form.bankName" input-align="right" placeholder="请选输入银行名称" />
						</u-form-item>
						<u-form-item class="form-item" label="结算账户" prop="accountNo" label-width="300" required>
							<u-input v-model="form.accountNo" input-align="right" placeholder="请输入结算账户" />
						</u-form-item>
						<u-form-item class="form-item" label="结算户名" prop="accountName" label-width="300" required>
							<u-input v-model="form.accountName" input-align="right" placeholder="请输入结算户名" />
						</u-form-item>
						<!-- 对私 -->
						<template v-if="form.accountType == 0">
							<u-form-item class="form-item" label="身份证号" prop="identityCard" label-width="300" required>
								<u-input v-model="form.identityCard" input-align="right" placeholder="请输入身份证号" />
							</u-form-item>
							<u-form-item class="form-item" label="银行预留手机号" prop="mobileNum" label-width="300" required>
								<u-input v-model="form.mobileNum" input-align="right" placeholder="请输入银行预留手机号" />
							</u-form-item>
						</template>
						<!-- 对公 -->
						<template v-if="form.accountType == 1">
							<u-form-item class="form-item" label="联行号" prop="cnaps" label-width="300" required>
								<u-input v-model="form.cnaps" input-align="right" placeholder="请输入联行号" />
							</u-form-item>
							<u-form-item class="form-item" label="支行名称" prop="subBankName" label-width="300" required>
								<u-input v-model="form.subBankName" input-align="right" placeholder="请输入支行名称" />
							</u-form-item>
							<u-form-item class="form-item" label="统一社会信用代码" prop="unifySocialCreditCodes" label-width="300" required>
								<u-input v-model="form.unifySocialCreditCodes" input-align="right" placeholder="请输入统一社会信用代码" />
							</u-form-item>
						</template>
					</view>
					<view v-if="stepCurrent == 2">
						<u-form-item class="form-item" label="交易分润分账" prop="transShareSwitch" label-width="300" required>
							<u-switch v-model="form.transShareSwitch"></u-switch>
						</u-form-item>
						<u-form-item class="form-item" label="服务费分账" prop="serviceFeeSwitch" label-width="300" required><u-switch v-model="form.serviceFeeSwitch"></u-switch></u-form-item>
						<u-form-item class="form-item" label="通讯费分账" prop="commFeeSwitch" label-width="300" required><u-switch v-model="form.commFeeSwitch"></u-switch></u-form-item>
						<u-form-item class="form-item" label="达标奖励分账" prop="standardSwitch" label-width="300" required><u-switch v-model="form.standardSwitch"></u-switch></u-form-item>
						<u-form-item class="form-item" label="提现手续费分账" prop="withdrawFeeSwitch" label-width="300" required>
							<u-switch v-model="form.withdrawFeeSwitch"></u-switch>
						</u-form-item>
						<u-form-item class="form-item" label="激活奖励分账开关" prop="activeShareSwitch" label-width="300" required>
							<u-switch v-model="form.activeShareSwitch"></u-switch>
						</u-form-item>
			<!-- 			<u-form-item class="form-item" label="提现审核" prop="withdrawAuditSwitch" label-width="300" required>
							<u-switch v-model="form.withdrawAuditSwitch"></u-switch>
						</u-form-item> -->
						<u-form-item class="form-item" label="提现日限额" prop="limitDay" label-width="300" required>
							<u-input v-model="form.limitDay" input-align="right" placeholder="请输入提现日限额" />
						</u-form-item>
						<u-form-item class="form-item" label="提现月限额" prop="limitMon" label-width="300" required>
							<u-input v-model="form.limitMon" input-align="right" placeholder="请输入提现月限额" />
						</u-form-item>
					</view>
				</u-form>
			</view>
		</view>
		<view class="button-box">
			<view class="pre-btn button" v-if="stepCurrent != 0" @click="preBtn">上一步</view>
			<view class="next-btn button" @click="nextBtn">{{ stepCurrent == stepList.length - 1 ? '确定' : `下一步${stepList[stepCurrent + 1].name}` }}</view>
		</view>
		<u-picker mode="region" v-model="isShowArea" @confirm="areaConfirm"></u-picker>
		<!-- <u-picker v-model="isShowPreAgent" mode="selector"></u-picker> -->
		<u-select v-model="isShowPreAgent" :list="agentFirstList" value-name="agentNo" label-name="agentName" @confirm="preAgentConfirm"></u-select>
		<u-select v-model="isShowAccountType" :list="accountTypeSelect" value-name="dicValue" label-name="dicLabel" @confirm="accountTypeConfirm"></u-select>
	</view>
</template>

<script>
import { getById, addAgent, update, checkLoginUser, checkAgentName, checkPreAgent, preList } from '@/api/agent';
export default {
	data() {
		let IDcardRegexp = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; //身份证验证
		let phoneRegexp = /^[1][3,4,5,6,7,8,9][0-9]{9}$/; //手机号验证
		let isPhone = (rule, value, callback) => {
			if (!phoneRegexp.test(value)) {
				return callback(new Error('手机号格式不对！'));
			} else {
				callback();
			}
		};
		let checkPhone = async (rule, value, callback) => {
			let data = await checkLoginUser({
				linkMobile: value
			});
			if (data.code != 200) {
				return callback(new Error('已存在！'));
			} else {
				callback();
			}
		};
		let checkName = async (rule, value, callback) => {
			let data = await checkAgentName({
				agentName: value
			});
			if (data.code != 200) {
				return callback(new Error('已存在！'));
			} else {
				callback();
			}
		};
		let isIDCard = (rule, value, callback) => {
			if (!IDcardRegexp.test(value)) {
				return callback(new Error('身份证格式不对！'));
			} else {
				callback();
			}
		};
		return {
			isShowArea: false,
			stepList: [
				{
					name: '基础信息',
					icon: require('../../../static/images/certification-icon1.png')
				},
				{
					name: '结算卡信息',
					icon: require('../../../static/images/certification-icon1.png')
				},
				{
					name: '权限设置',
					icon: require('../../../static/images/certification-icon1.png')
				}
			],
			form: {
				transShareSwitch: true,
				serviceFeeSwitch: true,
				commFeeSwitch: true,
				standardSwitch: true,
				withdrawFeeSwitch: true,
				withdrawAuditSwitch: true,
				activeShareSwitch: true,
				accountType: 0
			},
			areaName: '',
			stepCurrent: 0,
			rules: {
				agentName: [
					{
						required: true,
						message: '请输入代理商名称',
						trigger: 'blur'
					},
					{
						validator: checkName,
						trigger: 'blur',
						message: '已存在,请重新输入'
					}
				],

				linkMobile: [
					{
						required: true,
						message: '请输入联系人手机号',
						trigger: 'blur'
					},
					{
						validator: checkPhone,
						trigger: 'blur',
						message: '手机号已注册'
					},
					{
						validator: isPhone,
						trigger: 'blur',
						message: '手机号格式不正确'
					}
				],
				linkMan: [
					{
						required: true,
						message: '请输入联系人姓名',
						trigger: 'blur'
					}
				],
				address: [
					{
						required: false,
						message: '请输入详细地址',
						trigger: 'blur'
					}
				],
				province: [
					{
						required: false,
						message: '请选择地区',
						trigger: 'blur'
					}
				],
				bankName: [
					{
						required: true,
						message: '请输入银行名称',
						trigger: 'blur'
					}
				],
				accountNo: [
					{
						required: true,
						message: '请输入结算账户',
						trigger: 'blur'
					}
				],
				accountName: [
					{
						required: true,
						message: '请输入结算户名',
						trigger: 'blur'
					}
				],
				identityCard: [
					{
						required: true,
						message: '请输入身份证号',
						trigger: 'blur'
					}
				],
				mobileNum: [
					{
						required: true,
						message: '请输入预留手机号',
						trigger: 'blur'
					},
					{
						validator: isPhone,
						trigger: 'blur',
						message: '手机号格式不正确'
					}
				],
				cnaps: [
					{
						required: true,
						message: '请输入联行号',
						trigger: 'blur'
					}
				],
				subBankName: [
					{
						required: true,
						message: '请输入支行名称',
						trigger: 'blur'
					}
				],
				unifySocialCreditCodes: [
					{
						required: true,
						message: '请输入统一社会信用代码',
						trigger: 'blur'
					}
				],
				limitDay: [
					{
						required: true,
						message: '请输入提现日限额',
						trigger: 'blur'
					}
				],
				limitMon: [
					{
						required: true,
						message: '请输入提现月限额',
						trigger: 'blur'
					}
				]
			},
			errorType: ['toast'],
			switchFlag: false, // 0 没有设置平行代理商权限  1 有设置平行代理商权限
			isShowPreAgent: false,
			agentFirstList: [],
			preAgentName: '',
			accountTypeSelect: [
				{
					dicLabel: '对私',
					dicValue: 0
				},
				{
					dicLabel: '对公',
					dicValue: 1
				}
			],
			isShowAccountType: false,
			accountTypeName: '对私'
		};
	},
	onLoad(options) {
		checkPreAgent().then(res => {
			this.switchFlag = res.data.switchFlag;
			if (this.switchFlag == 1) {
				this.getAgentFirst();
			}
		});
	},
	methods: {
		// 获取平行代理
		getAgentFirst(query) {
			this.selectLoading = true;
			let params = {
				name: query
			};
			preList(params).then(res => {
				this.selectLoading = false;
				this.agentFirstList = res.data.map(item => {
					item.agentName = `${item.agentName}(${item.agentNo})`;
					return item;
				});
			});
		},
		areaHandel() {
			this.isShowArea = true;
		},
		// 地址确定
		areaConfirm(areaValue) {
			const { province, city, area } = areaValue;
			this.form.province = province.label;
			this.form.city = city.label;
			this.form.area = area.label;
			this.form.areaCode = area.value;
			this.areaName = `${province.label}-${city.label}-${area.label}`;
		},
		preAgentHandel() {
			this.isShowPreAgent = true;
		},
		// 平行代理确定
		preAgentConfirm(e) {
			const { value, label } = e[0];
			this.form.preAgentNo = value;
			this.preAgentName = label;
		},
		// 对公对私确定
		accountTypeConfirm(e) {
			const { value, label } = e[0];
			this.accountTypeName = label;
			this.form.accountType = value;
		},
		// 下一步
		nextBtn() {
			let params = {
				...this.form
			};
			params.transShareSwitch = this.form.transShareSwitch ? 1 : 0;
			params.serviceFeeSwitch = this.form.serviceFeeSwitch ? 1 : 0;
			params.commFeeSwitch = this.form.commFeeSwitch ? 1 : 0;
			params.standardSwitch = this.form.standardSwitch ? 1 : 0;
			params.withdrawFeeSwitch = this.form.withdrawFeeSwitch ? 1 : 0;
			params.withdrawAuditSwitch = this.form.withdrawAuditSwitch ? 1 : 0;
			params.activeShareSwitch = this.form.activeShareSwitch ? 1 : 0;
			const index = this.stepCurrent;
			if (index < this.stepList.length - 1) {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						return (this.stepCurrent += 1);
					}
				});
				// this.stepCurrent += 1;
			} else {
				this.stepCurrent = this.stepList.length - 1;
				console.log({
					params
				});
				this.$tip.loading('添加中.....');
				// return;
				addAgent(params)
					.then(response => {
						this.$tip.loaded();
						if (response.code === 200) {
							this.$tip.toast(response.msg);
							// console.log('代理商编号 --')
							// console.log(response.data.agentNo)
							setTimeout(() => {
								// this.$nav.goBack();
								uni.redirectTo({
								  url: '/pages/home/policy/open?agentNo=' + response.data.agentNo
								});
							}, 500);
						}
					})
					.catch(err => {
						this.$tip.loaded();
					});
				//以下代码删除
				// setTimeout(() => {
				// 	uni.redirectTo({
				// 	  url: '/pages/home/policy/open?agentNo=' + 'A111111'
				// 	});
				// }, 500);
			}
		},
		// 上一步
		preBtn() {
			const index = this.stepCurrent;
			// this.stepCurrent = index == 0 ? 0 : index - 1;
			this.stepCurrent -= 1;
		}
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	}
};
</script>

<style lang="scss" scoped>
$activeColor: #fff;
$noActiveColor: #bcdcff;

page {
	background: #f6f9ff;
}

.step {
	padding: 60upx 80upx 60upx;
	// background: #1b89ff;
	background: $box-linear-bg;
	position: relative;
	z-index: 0;

	.box {
		font-size: 26upx;
		font-weight: 400;
		color: $noActiveColor;
		width: 50%;

		.icon-box {
			margin-bottom: 10upx;

			.bg {
				background: $noActiveColor;
				width: 60upx;
				height: 60upx;
				border-radius: 50%;

				image {
					width: 30upx;
					height: 30upx;
				}
			}

			.line {
				flex: 1;
				background: $noActiveColor;
				height: 2upx;
			}
		}

		.text-name {
			text-indent: R(-20);
		}

		.text-more {
			text-indent: R(-35);
		}

		&:last-child {
			width: 20%;
		}
	}

	.active {
		color: $activeColor !important;

		.icon-box {
			.bg {
				background: $activeColor !important;
			}

			.line {
				background: $activeColor !important;
			}
		}
	}
}

.add-agent-contain {
	border-radius: R(30) R(30) 0 0;
	overflow: hidden;
	margin-top: R(-20);
	position: relative;
	z-index: 1;
	background: #fff;
	padding: R(20) R(30);
}

.button-box {
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin-top: R(50);

	.button {
		border-radius: R(50);
		padding: 0 R(30);
		background: $button-linear-bg;
		text-align: center;
		height: R(80);
		line-height: R(80);
	}

	.pre-btn {
		width: 30%;
		background-color: #ffffff;
	}

	.next-btn {
		width: 60%;
		color: #ffffff;
	}
}
</style>
